<template>
  <el-dialog
    @close="reset"
    :title="specsData.id > 0 ? '编辑' : '新增'"
    :visible.sync="info.isShow"
  >
    <el-form
      ref="specsForm"
      label-width="80px"
      :model="specsData"
      :rules="rules"
    >
      <el-form-item label="规格名称" prop="specsname">
        <el-input
          placeholder="规格名称"
          v-model.trim="specsData.specsname"
        ></el-input>
      </el-form-item>
      <el-form-item label="规格属性" prop="attrs">
        <div class="item" v-for="(item, index) in attrsArr" :key="index">
          <el-input
            v-model.trim="attrsArr[index]"
            placeholder="规格属性"
          ></el-input>
          <el-button
            type="primary"
            size="mini"
            @click="addItem"
            v-if="index === 0"
            >新增</el-button
          >
          <el-button
            v-else
            type="warning"
            size="mini"
            @click="removeItem(index)"
            >删除</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="规格状态" prop="status">
        <el-radio-group v-model.trim="specsData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer" slot="footer">
      <el-button @click="reset">取消</el-button>
      <el-button @click="submit" type="primary">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: ["info"],
  data() {
    //   自定义表单校验函数
    const validAttrs=(rule,value,callback)=>{
        // 假设所有的规格属性输入框都输入了内容
        // let flag=true;
        // this.attrsArr.forEach(item=>{
        //     if(item===''){
        //         // 推翻假设
        //         flag=false
        //     }
        // });
        let flag=this.attrsArr.every(item=>{
            if(item===''){
                return false;
            }
            return true;
        });
        if(!flag){
            return callback(new Error('请输入规格属性'));
        }
        callback();
    }
    return {
      // 控制规格属性输入框的数量
      attrsArr: [""],
      // 表单数据
      specsData: {
        specsname: "",
        attrs: "",
        status: "",
      },
      //   表单校验对象
      rules: {
        specsname: {
          required: true,
          message: "请输入规格名称",
          trigger: "blur",
        },
        status: { required: true, message: "请选择规格状态", trigger: "blur" },
        attrs:{validator:validAttrs,trigger:'blur'}
      },
    };
  },
  methods: {
    //  更新表单数据
    setFormData(obj) {
      this.specsData = { ...obj };
      this.attrsArr = [...obj.attrs];
    },
    //   重置数据
    reset() {
      // 1-关闭对话框组件
      this.info.isShow = false;
      // 2-重置表单元素
      this.specsData = {
        id: "",
        specsname: "",
        attrs: "",
        status: "",
      };
      this.attrsArr = [""];
    },
    submit() {
      this.$refs.specsForm.validate((valid) => {
        if (valid) {
          //   手动同步规格属性值
          this.specsData.attrs = this.attrsArr.join(",");
          const url = this.specsData.id > 0 ? "/specsedit" : "/specsadd";
          this.$axios.post(url, this.specsData).then((res) => {
            if (res.code === 200) {
              this.$message.success(res.msg);
              // 更新规格数据: 通知父组件完场数据更新
              this.$emit("specsUpdate");
              // 重置数据
              this.reset();
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    //   新增规格属性输入框
    addItem() {
      if (this.attrsArr.length >= 5) {
        return this.$message.warning("最多只能添加5个");
      }
      this.attrsArr.push("");
    },
    // 移除规格属性输入框
    removeItem(index) {
      this.attrsArr.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.item {
  display: flex;
  margin: 5px 0;
}
</style>